@import "message";

/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
    width: 8px; /* 1px wider than Lion. */
    /* This is more usable for users trying to click it. */
    background-color: rgba(0,0,0,0);
    -webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
    /* This is the EXACT color of Mac OS scrollbars.
       Yes, I pulled out digital color meter */
    background: rgba(0,0,0,0.5);
    -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
    background: rgba(0,0,0,0.61); /* Some darker color when you click it */
    -webkit-border-radius: 100px;
}


body {
    background-color: #ddd;
    font-size: 1em;
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
    }
    ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, .08);
    }
    ::-webkit-scrollbar {
        width: 6px;
    }
    margin:0px;
}
li {
    list-style: none;
}

ul, ol, li {
    padding: 0;
    margin: 0;
}

.hide {
    display: none !important;
}


.app {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
    height: 100%;
    display: flex;
    margin: 0 auto;
    top: 19px;
    z-index: 2;
    border-radius: 3px;
    overflow: hidden;
    background-position: top left;
    background-repeat: repeat-x;
    background-color: rgb(240, 240, 240);
    user-select: none;
}


.pane-list {
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background-color: rgb(251,251,251);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}


.main {
    background: rgb(243,243,243);
    .intro {
        height: 100%;
        padding-top: 100px;
        text-align: center;
        background-color: #fff;
        font-size: 32px;
        position: absolute;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .contact {
        display:flex;
        flex-direction:column;
        align-self:center;

        .header {
            display:flex;
            margin-top:100px;
            font-size: 32px;

            .avatar {
                margin-left:40px;
                width: 56px;
                height: 56px;
            }
        }
        .line {
            height:1px;
            width:200px;
            background-color:rgb(230,230,230);
            margin-top:24px;
        }

        .item {
            p {
                color:gray;
                font-size: 14px;
            }
            span {
                color:black;
                font-size: 18px;
                margin-left: 12px;
            }
        }
        button {
            background-color:rgb(99, 183, 78);
            border-radius: 6px;
            border:2px;
            width:120px;
            height:36px;
            margin-top:40px;
            align-self: center;
        }

    }

}



.app-wrap {
    width: 100%;
    height: 100%;
    &::before {
        position: absolute;
        z-index: 1;
        background-color: #009688;
        width: 100%;
        height: 127px;
        content: '';
        -webkit-animation: bar-slide .2s cubic-bezier(.1, .82, .25, 1);
        animation: bar-slide .2s cubic-bezier(.1, .82, .25, 1);
        top: 0;
        left: 0;
    }
}




.shortcut-wrap{
    height: 36px;
    .clipboard{
        background: url('../images/ico_trayicon@2x.png') no-repeat;
        background-size: 100%;
        display: inline-block;
        width: 28px;
        height: 28px;
        vertical-align: middle;
        opacity: .6;
    }
    .shortcut-wrap .clipboard:hover{
        opacity: 1;
    }
}



.contact-list {
    height:100%;
    overflow:hidden;
    overflow-y:scroll;

    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;

    .num {
        color: #f60;
        position: absolute;
        right: 10px;
        top: 30px;
        font-size: 20px;
        margin-left: 8px;
        font-weight: 700;
    }
    .uid {
        padding-left: 20px;
        font-size: 14px;
        color: #888;
    }

    li {
        position: relative;
        padding: 14px 15px 12px 13px;
        cursor: pointer;
        background-color: rgb(251,251,251);
        box-sizing: border-box;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-bottom: 1px solid #efefef;

        //&:hover {
        //    background:#ebf2f7;
        //}

        &.active {
            background: rgb(227, 227, 227);
            border-bottom: 1px solid #dde7f0;
        }

        .avatar {
            -webkit-box-flex: 0;
            -webkit-flex: none;
            -ms-flex: none;
            flex: none;
            width: 48px;
            height: 48px;
            border-radius:4px;
        }

        .name {
            line-height: 50px;
            padding-left: 20px;
        }
    }
}


.conversation-list {
    border-top: 1px solid #e1e9f1;
    overflow-y: auto;
}

.conversation-item {
    user-select: none;
    overflow: hidden;
    padding:1px 1px 2px 0px;
    border-bottom: 1px solid #e1e9f1;
    cursor: pointer;
    position: relative;
    background-color: rgb(251,251,251);

    display: block;
//    pointer-events: none;
    text-decoration: none;
    color: black;

    &:hover {

    }
    &.selected {
        background: rgb(227, 227, 227);
    }

    &.focus {
     
    }
    
    .badge{
       color: #f60;
       position: absolute;
       right: 10px;
       top: 30px;
       font-size: 20px;
       margin-left: 8px;
       font-weight: 700;
   }

   .timer{color: #8e969f}

   .border {
       padding: 6px 18px 15px 18px;        
       position: relative;
       border:2px solid;
       border-radius:8px;

       border-color:rgba(225, 225, 225, 0);
       
       &.focus {
           border-color:rgb(225, 225, 225);
           &.selected {
               border-color:rgb(255, 255, 255);
           }
       }
   }
  
    
   p {
       margin: 0;
   }

   .online {
       opacity: 1;
   }
   .offline {
       opacity: .3;
   }

   .photo {
       float: left;
       margin-right: 10px;
       position: relative;

       .avatar {
           display: block;
           width: 55px;
           height: 55px;
           border-radius: 4px;
       }
   }
    
   .info {
       overflow: hidden;

       .nickname {
           font-weight: 400;
           font-size: 14px;
           color: #000;
           line-height: 20px;
           margin: 0;
       }

       .nickname_text {
           display: inline-block;
           *display: inline;
           *zoom: 1;
           vertical-align: top;
           width: 100%;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           word-wrap: normal
       }

       .nickname_count {
          display: inline-block;
          *display: inline;
          *zoom: 1;
          vertical-align: top
      }

      .msg {
          color: #8e969f;
          font-size: 14px;
          width: 100%;
          /*overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          height: 1.5em*/
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin-top: 8px;
      }

   }

   .ext {
       float: right;
       color: #6b6f7c;
       font-size: 13px;
       text-align: right;
       min-width: 55px;

       .attr {
          height: 19px;
          line-height: 1.5;
          font-size: 12px;
      }
   }

}



.no-remind {
    background: url(../images/icons.png) 3px -135px/100px auto no-repeat;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    float: right;
}

.toolbar {
    width: 70px;
    height: 100%;
}

.LeftNav {
    float: left;
    width: 70px;
    height: 100%;
    position: relative;
    text-align: center;
    background-color: rgb(61, 61, 61);
    /*background: url(../images/barBg.png) repeat-y;*/
    /*background-size: 40px 30px;*/


    /*.LeftNav .LeftNav-item:first-child{ margin-top: 20px;}*/
    .LeftNav-item {
        color: #444;
        width: 70px;
        height: 70px;
        cursor: pointer;
        font-size: 20px;
        transition: background .2s linear;
        line-height: 75px
    }

    .LeftNav-item div> a {
        float: left;
        width: 70px;
        height: 36px;
        text-indent: -9999px;
        margin-top: 17px;
    }


    .setting {
        position: absolute;
        bottom:0;
        width:100%;
        color:white;
    }

    .loginOut{
        position: absolute;
        bottom: 4%;
        cursor: pointer;
        width: 100%;
        color: white;
    }

}

.iconfont-single a {
    background: url(../images/icons.png) 17px 0/108px auto no-repeat;

}
.iconfont-single a:hover,.iconfont-single.cur a {
    background-position: -42px 0;
    background-size: 100px auto;
}

.iconfont-group a {
    background: url(../images/icons.png) 17px -36px/100px auto no-repeat;
}

.iconfont-group a:hover,.iconfont-group.cur a {
    background-position: -43px -36px;
}

.iconfont-add {
    position: absolute;
    bottom: 15px;
    left: 0;
}

.iconfont-add div> a {
    background: url(../images/icons.png) 23px -70px/100px auto no-repeat;
}

.LeftNav-item:active, .LeftNav-item:focus, .LeftNav-item:hover {
    background: rgba(55, 55, 55, 0.1);
}
.LeftNav-item.cur {
    background: rgba(55, 55, 55, 0.1);
}

.LeftNav-item.is-active {
    /*color: #fff;
    background: #82c547*/
}

.LeftNav-item .Presence {
    border-color: #00a0ff
}

.LeftNav-item.is-active .Presence {
    display: none
}
.groupMem{
    height: 50px;
    margin-top: 10px;
    img{
        width: 50px;
    }
}
